<!-- 评价  -->
<template>
	<s-layout title="留言">
		<view>
			<uni-forms
					ref="addressFormRef"
					v-model="state.form"
					:labelStyle="{ fontWeight: 'bold' }"
					border
					labelAlign="left"
					labelWidth="160"
					validateTrigger="bind"
			>
				<view class="bg-white form-box ss-p-x-30">
					<uni-forms-item class="form-item" label="留言内容" name="comments">
						<uni-easyinput
								v-model="state.form.comments"
								:inputBorder="true"
								disabled
								placeholder="请选择留言内容, 后台为您自动发布到煤炉, 若未发布联系客服IM即可"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								type="textarea"
						/>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="cicon-notice"
		      style="padding: 10px;
	          margin: 5px;
	          width: 90%;
	          background-color: #F39800;
	          border-radius: 10px; color: #FFFFFF;">
			<text>留言消耗【💰{{ state.form.amount }}元】或【⭐{{ state.form.score }}积分】</text>
		</view>
		<su-tabs
				:current="state.currentTab"
				:list="tabMaps"
				@change="onTabsChange"
		></su-tabs>
		<view style="position: relative; margin-top: 2%; padding: 20rpx">
			<uni-table ref="table" border emptyText="暂无更多数据" stripe>
				<uni-tr>
					<uni-th align="center" width="220rpx">快捷语</uni-th>
					<uni-th align="center" width="80rpx">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in state.tableData" :key="index">
					<uni-td>
						<text style="font-weight: bold">日语：{{ item.jp }}</text>
						<br>
						<text style="font-weight: bold; color: #F39800">译文：{{ item.zh }}</text>
					</uni-td>
					<uni-td align="center">
						<button class="ss-reset-button ui-BG-Main-Gradient ui-Shadow-Main" @click="onSelect(item)">选择</button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<su-fixed bottom placeholder>
			<view class="qWAYsGbF af vHB找V分Vsv ` ss-flex ss-row-center ss-col-center">
				<button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
					发布
				</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {onLoad} from '@dcloudio/uni-app';
import {reactive} from 'vue';

const state = reactive({
	form: {},
	currentTab: 0,
	tableData: [],
	newReviewData: []
});

const tabMaps = [
	{
		name: '购入前基本确认事项',
		value: '购入前基本确认事项',
	},
	{
		name: '卡片类别确认事项',
		value: '卡片类别确认事项',
	},
	{
		name: '运输方式&运费确认事项',
		value: '运输方式&运费确认事项',
	},
	{
		name: '购入后的确认事项',
		value: '购入后的确认事项',
	},
	{
		name: '拒绝类别的回复事项',
		value: '拒绝类别的回复事项',
	}
];

async function onSubmit() {
	// 确认框
	uni.showModal({
		title: `提醒`,
		content: `注意：留言发送后不可撤销，请在主页熟悉留言规则后并确认无误再发送。`,
		success: async function (res) {
			if (res.confirm) {
				const commentPre = await sheep.$api.goods.commentAdd(state.form);
				console.log('commentPre', commentPre)
				// 确认框
				uni.showModal({
					title: `积分留言`,
					content: `是否直接使用积分留言`,
					success: function (cfi) {
						if (cfi.confirm) {
							// 积分留言
							sheep.$api.goods.commentPayByScore({
								payId: commentPre.data.payId,
								type: 4
							}).then(success => {
								console.log('res', success)
								if (success) {
									sheep.$helper.toast('留言成功');
									sheep.$router.back();
								}
							})
						} else {
							// 现金留言
							sheep.$router.redirect('/pages/pay/index', {
								orderSN: commentPre.data.payId,
								totalAmount: commentPre.data.amount,
								orderType: 'commentPay',
								rate: 0.0
							});
						}
					}
				});
			}
		}
	});
}

function onSelect(item) {
	state.form.comments = item.jp;
}

function onTabsChange(e) {
	console.log(e)
	if (state.currentTab === e.index) return;
	state.currentTab = e.index;
	state.tableData = state.newReviewData.find(item => item.name === e.value).value
	console.log(state.tableData, '选项卡改变')
}

onLoad(async (options) => {
	const {productId} = options;
	state.form.productId = productId;
	if (sheep.$helper.isRealEmpty(productId)) {
		sheep.$helper.toast('参数错误');
		sheep.$router.back();
	}
	// state.tableData = await sheep.$api.order.channelList({ type: 'review_word' });
	let newReviewDict = await sheep.$api.dict.getDict('new_product_review', 'value');
	if (newReviewDict) {
		state.newReviewData = JSON.parse(newReviewDict.data)
		state.tableData = state.newReviewData[0].value
		console.log(state.newReviewData, state.tableData)
	}
	// 获取留言价格
	let commentAmount = await sheep.$api.dict.getDict('comment_amount', 'value');
	console.log('留言金额', commentAmount.data)
	state.form.amount = commentAmount.data;

	// 获取留言积分
	let commentScore = await sheep.$api.dict.getDict('comment_score', 'value');
	console.log('留言积分', commentScore.data)
	state.form.score = commentScore.data;
});
</script>

<style lang="scss" scoped>
// 评价商品
.goods-card {
	margin: 10rpx 0;
	padding: 20rpx;
	background: #fff;
}

// 留言，选择图片
.form-item {
	background: #fff;

	.star-box {
		height: 100rpx;
		padding: 0 25rpx;
	}

	.star-title {
		font-weight: 600;
	}
}

.area-box {
	width: 690rpx;
	min-height: 306rpx;
	background: rgba(249, 250, 251, 1);
	border-radius: 20rpx;
	padding: 28rpx;
	margin: auto;

	.img-box {
		margin-top: 20rpx;
	}
}

.post-btn {
	width: 690rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	color: rgba(#fff, 0.9);
	margin-bottom: 20rpx;
}
</style>
